<template>
    <div class="login">
        <div class="login_box">
            <div class="login_xU">
                <img src="@/assets/orange.png" alt="">
                <p class="login_title">优质生活·高枕无忧</p>
                <el-form :model="loginInfo" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="pass">
                        <el-input v-model="loginInfo.username" autocomplete="off" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input v-model="loginInfo.password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-button type="danger" round style="width:100%;" @click="loginBtn">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    name: 'MyAppIndex',

    data() {
        return {
            loginInfo: {
                username: "admin",
                password: "123123"
            },
            rules: {
                username: [],
                password: []
            }
        };
    },

    mounted() {

    },

    methods: {
        ...mapActions('login', ['loginActions']),
        async loginBtn() {
            try {
                await this.loginActions(this.loginInfo)
                this.$message.success('登录成功')
                this.$router.push('/home')
            } catch (error) {
                this.$message.error('登录失败')
            }

        }
    },
};
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #ff6345, #ff887e);
}

.login_box {
    width: 900px;
    height: 650px;
    background: aqua;
    position: fixed;
    right: 0;
    bottom: 0;
    background: url('@/assets/login.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 100px;
    left: 480px;

    .login_xU {
        width: 450px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 355px;
        /* border: 1px solid blue; */
        padding: 60px;
        box-sizing: border-box;

        img {
            width: 330px;
            height: 80px;
            margin-top: 60px;
        }

        .login_title {
            text-align: center;
            font-family: PingFangSC-Light;
            font-size: 20px;
            letter-spacing: 18px;
            line-height: 72px;
            color: #999999;
            margin: 20px 0 80px 0;
        }
    }
}
</style>